#ReactApp项目构建流程【3】

帮助程序员简化流程，专注业务代码的webpack配置

3.1项目中很有用的webpack常用配置

在传统html开发流程中，webapp开发模式中，前端代码改动很多，按照之前的流程跑的话，每次都需要npm run build以及run start，开发流程就会很繁琐

webpack dev server

webpack官方插件,通过webpack配置去启动一个微型服务器，便于开发者在开发过程中避免不必要的build以及start，并且该服务器编译出来的内容保存于内存中，一旦内容有更新，都会自动执行build，而不用手动build

Hot module replacement

编辑工程时，帮助我们在修改代码后，页面实时更新[区别于会重新请求页面的“刷新”]

• 免于手动刷新查看页面效果
• webapp开发模式会在前端中存储大量数据，如果没有实时刷新，那么每次手动刷新时数据都会重新请求一遍，时间非常浪费，Hot module replacement可以保持当前状态，无需重新请求数据

3.2具体配置__webpack dev server

• 想仔细了解可去webpack官网查阅

• 因为上述配置只用于开发环境，所以需要判断当前执行环境，需要在webpack.config.client.js中添加以下代码

  //添加执行环境判断变量【NODE_ENV】
  const isDev=process.env.NODE_ENV==='development';
  //修改
  module.exports={...}
  ->    const config={...}
  //在最后加入
  if(isDev){
      config.devServer={        //devServer而不是server
          host:'0.0.0.0',//兼容localhost，0.0.0.0，以及IP三种方式访问
          port:'3000',   //webpack微服务端口(以后都称为devServer)
          contentBase:path.join(__dirname,'../dist'),//静态文件路径
          hot:true,       //是否开启Hot module replacement
          overlay:{       //网页什么时候出现遮罩警告层，这里配置为error时
              errors:true //还有多种，比如warning，但是一般会过滤掉其他类型
         }
      }
  }
  module.exports=config;      //不是modules也不是export也不是(config)...

• $npm i webpack-dev-server -D

• 安装完成后在package.json中添加启动微服务的script

  scripts->
  "dev:client":"cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.config.client.js"    //手误写成server.js
  //上面判断执行环境时，使用的【NODE_ENV】就是这里定义的变量【NODE_ENV】
  //cross-env是一个我们需要安装的包，用于兼容windows，linux以及mac的命令行

• $npm i cross-env -D

• $npm run dev:client

  • 进入浏览器访问，查看http请求，发现请求文件有404，查看请求url，发现路径多了public，需要在配置devServer时进行处理
  • 具体原因：webpack.config.client.js->devServer->contentBase的value表示启动devServer在value目录下，也就是说devServer的root是dist目录，而dist目录是真正的项目ROOT的一个子节点，而client被output出去时使用的是静态资源文件路径是添加上了publicPath的value--'/public'

  • 解决方法：在devServer中添加配置：

    publicPath:'/public',       //访问静态资源时都需要添加public
    historyApiFallback:{        
    //为我们自动配置了很多映射关系，单页应用的所有url都会返回404，而该配置将所有前端返回的404请求都返回成historyApiFallback的index
        index:'/public/index.html' //指定index，因为publicPath添加了前缀，所以此处也需要添加前缀
    }

• $npm run dev:client

  • 配置完后仍然会有404，因为devServer会检测硬盘是否有此目录，有时会以硬盘为准而非内存中编译文本的内容为准。
  • 删除dist目录，重新$npm run dev:client，此时报错：
    Uncaught Error: [HMR] Hot Module Replacement is disabled.
    【原因】：在devServer中开启了hot:true，但是并没有安装相关依赖模块导致引用相关js文件shi出错
    【解决】：暂时注释掉hot：true,重新 $npm run dev:client
  • 小优化：
    将template.html中的<app>标签修改为html注释<!--app-->，然后在server端渲染时，由替换非标准html标签<app>修改为替换注释，因为注释不会被浏览器编译，自然不会判断出错

• 修改代码会发现浏览器实现内容自动刷新(为实现自动更新需要配置hot-module-replacement)

3.3具体配置__Hot-module_replacement

* `.babelrc`添加`presets`同级KV
    "plugins":["react-hot-loader/babel"]
    
* `$npm i react-hot-loader@next -D`
    @next是因为当前为测试版，尚未正式发布到npm中
    
* `app.js`加入以下内容，[我的第2篇文章](https://segmentfault.com/a/1190000012945475)
    ```
    if(module.hot){    //当我们需要热更新的代码有更新时，重新加载App
    module.hot('./App.jsx',()=>{
        const NextApp=require('./App.jsx').default;//加default的原因在上面链接中有提到
        ReactDOM.hydrate(<NextApp />,document.getElementById('root'));
        })
    }
    
* `$npm run dev:client`
    ```
    发现页面仍然会自动刷新，没有实现
     
* `client配置中`
    ```
    hot:true解注释
    const webpack=require('webpack')
    //顶部引入webpack
    config.plugins.push(new Webpack.HotModuleReplacementPlugins());
    //与config.devServer同级添加webpack的HotModuleReplacementPlugins插件    
    //由于在.babelrc中添加了hotmodule配置，需要在开发时修改entry，由于只是在开发是进行修改，所以config.devServer中进行修改即可：
    config.entry={
        app:[
            'react-hot-loader/patch',
            //客户端热更新代码时需要用到的补丁包
            path.join(__dirname,'./client/app.js')
            //要打包的内容
        ]//webpack的entry可以是个数组，代表着该entry中引用的文件，webpack在打包时会将所有的文件打包在一个文件中
    }
    

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { AppContainer } from 'react-hot-loader'
    //更新1：使用AppContainer去包裹我们的根节点想要渲染的实际HTML内容
    import App from './App.jsx'
    
    //ReactDOM.hydrate(<App />,document.getElementById('root'));
    //更新2：封装成可传递参数的方法，此处注释掉
    //将App挂载在document.body中，因为此时并没有模板，只有body可以使用，官方推荐在body中创建一个默认节点作为主dom
    
    const root=document.getElementById('root');
    //更新3：根节点变量化
    const render = Component =>{
        const renderMethod=module.hot ? ReactDOM.render :ReactDOM.hydrate;
        //注意点！
        //如果不对是否采用react-hot-loader进行判断，npm run dev：client时，进入浏览器会弹出错误
        //Warning: Expected server HTML to contain a matching <div> in <div>.
        renderMethod(
            <AppContainer>
                <Component />
            </AppContainer>,
                root
        )
    };
    //更新4：更新2的封装
    render(App);
    //更新5：传参调用更新4
    if(module.hot){
        module.hot.accept('./App.jsx',()=>{
            const NextApp=require('./App.jsx').default;
            
            //ReactDOM.hydrate(<App />,document.getElementById('root'));
            //更新6，采用封装方法，此处注释
            render(NextApp)
            //更新7，传参调用更新4
        })
    }
    

* `npm run dev:client`
    进入浏览器，修改内容，发现无需刷新即可更新内容，但是更新时间比较长，
        想要更快更新，需要手动保存CTRL+S
    另外，【如果】手动重启devServer后hotmodule失效（页面Elements刷新），
    打开network，勾选Preserve log(用于保留刷新前的请求内容，防止刷新后以前的请求丢失导致不好定位问题),
    修改内容后查看请求url，发现404请求，url样式：
        http://localhost:3000/public6f45a1f9b1cb390b0ffb.hot-update.json
        该文件通知hotmodule有模块更新以更新内容，发现public后缺失"/",需要在修改为
    publicPath:'/public/'，推荐后面都加上'/'，
    多'/'不会出现路径错误，少'/'却会在某些时候引发不可预期的错误

小结

• 多配置，多看官方文档，熟练各种配置，否则坑太多